<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
      <NButton @click="newTypeModal()">
        新增分类
      </NButton>
    </template>
    <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
      <MeQueryItem label="名称">
        <n-input v-model:value="queryItems.name" type="name" placeholder="名称" clearable />
      </MeQueryItem>
    </MeCrud>
    <!-- 新增和修改model -->
    <MeModal ref="$modalLabel">
      <n-form
        ref="formLabelRef" :model="goodsTypeModel" label-placement="left" :label-width="100" :style="{
          maxWidth: '440px',
        }"
      >
        <n-form-item label-align="right" label="名称" path="name">
          <n-input v-model:value="goodsTypeModel.name" placeholder="请输入标签名称">
            <template #password-visible-icon />
          </n-input>
        </n-form-item>
        <n-form-item label-align="right" label="序列号" path="rankNum">
          <n-input-number v-model:value="goodsTypeModel.rankNum" placeholder="请输入标签类型备注" clearable />
        </n-form-item>
        <n-form-item label="图片" path="imgUrl">
          <n-image
            width="100"
            :src="goodsTypeModel.imgUrl"
            :previewed-img-props="{ style: { border: '8px solid white' } }"
          />
        </n-form-item>
        <n-form-item label="图片" path="imgUrl">
          <n-input v-model:value="goodsTypeModel.imgUrl">
            <template #password-invisible-icon />
          </n-input>
        </n-form-item>

        <n-form-item label-align="right" label="备注" path="remark">
          <n-input v-model:value="goodsTypeModel.remark" type="textarea" placeholder="请输入标签备注" />
        </n-form-item>
      </n-form>
    </MeModal>
  </CommonPage>
</template>

<script setup>
import { MeCrud, MeModal, MeQueryItem } from '@/components'
import { useModal } from '@/composables'
import { NAvatar, NButton } from 'naive-ui'
import api from './api'

defineOptions({ name: 'GoodsMgt' })
const [$modalLabel] = useModal()
const formLabelRef = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})
const $table = ref(null)
onMounted(async () => {
  $table.value?.handleSearch()
})

const columns = [
  { title: '分类', key: 'name', width: 150 },
  {
    title: '序号',
    key: 'rankNum',
    width: 30,
  },
  {
    title: '图片',
    width: 80,
    key: 'imgUrl',
    render: ({ imgUrl }) =>
      h(NAvatar, {
        size: 'medium',
        src: imgUrl,
      }),

  },
  {
    title: '备注',
    key: 'remark',
    width: 150,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 150,
  },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    align: 'center',
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => updateTypeModal(row),
          },
          {
            default: () => '修改',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ),
      ]
    },
  },
]
// ----------------------------------------------标签管理----------------------------------------------------
const goodsTypeModel = ref({})
/**
 * 新增类型标签
 */
function newTypeModal() {
  openGoodsTypeModel('新增分类')
}
/**
 * 新增同类标签
 * @param row 标签对象
 */
async function updateTypeModal(row) {
  goodsTypeModel.value = row
  openGoodsTypeModel('修改分类')
}
/**
 * 更新标签
 */
async function openGoodsTypeModel(title) {
  $modalLabel.value?.open({
    title,
    width: '600px',
    okText: '确定',
    cancelText: '取消',
    async onOk() {
      await api.saveOrUpdate(goodsTypeModel.value)
      $table.value?.handleSearch()
      goodsTypeModel.value = {}
    },
    onCancel(message) {
      $message.info(message ?? '已取消')
    },
  })
}
</script>
